<template>
  <el-dialog :title="title" :visible="show" :before-close="cancel">
    <el-form label-width="100px" :model="form" ref="form" :rules="rules">
      <el-col>
        <BaseFormInput
          label="账户名称"
          prop="name"
          :span="24"
          labelwidth="100px"
          v-model="form.name"
        />
        <BaseFormSelect :span="14" labelwidth="100px" label="账户名称" />
      </el-col>
    </el-form>
    <span slot="footer">
      <el-button @click="cancel" icon="el-icon-close">取消</el-button>
      <el-button class="btnStyle" icon="el-icon-check" @click="submit" :loading="loading"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue, Watch } from "vue-property-decorator";
// lib
// components & widgets
import BaseFormInput from "@/components/base/BaseFormInput.vue";
import BaseFormSelect from "@/components/base/BaseFormSelect.vue";
// config
// script
import logUtils from "@/utils/logUtils";
// controller & service
import { addAdminService, updateAdminService } from "@/biz/admin/service";
// interface
import { Admin } from "@/biz/admin/model";
// 其它

@Component({
  components: {
    BaseFormInput,
    BaseFormSelect,
  },
})
export default class EditModal extends Vue {
  @Prop(Boolean) show!: boolean;
  @Prop(Object) info!: Admin | null;
  title = "";
  loading = false;
  form: {
    name: string;
    code: string;
  } = {
    name: "",
    code: "",
  };
  rules = {
    name: [
      {
        required: true,
        message: "请输入管理员账户名称，6-20位",
        min: 6,
        max: 20,
      },
    ],
    code: [
      {
        required: true,
        message: "请输入管理员账户密码，6-20位",
        min: 6,
        max: 20,
      },
    ],
  };
  @Emit("close")
  cancel() {
    return false;
  }
  @Emit("close")
  ok() {
    return true;
  }
  @Watch("show")
  onChangeValue(newVal: boolean) {
    if (newVal) {
      const form: any = this.$refs.form;
      form && form.resetFields();
      this.title = this.info ? "编辑管理员账户" : "添加管理员账户";
      // 设置简单值
      this.form.name = this.info?.sysUserName || "";
      this.form.code = "";
      // 设置复杂值
      if (this.info) {
        // TODO
      }
    }
  }
  submit() {
    const form: any = this.$refs.form;
    logUtils.info("提交表单", JSON.stringify(this.form));
    form.validate((valid: boolean) => {
      if (!valid) return;
      if (this.info) {
        this.edit();
      } else {
        this.add();
      }
    });
  }
  async add() {
    this.loading = true;
    const result = await addAdminService({
      sysUserName: this.form.name.trim(),
      sysUserPass: this.form.code.trim(),
    });
    this.loading = false;
    // 成功
    if (result.payload) {
      this.$message.success("添加成功");
      this.ok();
    }
    // 失败和异常
  }
  async edit() {
    if (!this.info) return;
    this.loading = true;
    const result = await updateAdminService({
      id: this.info.sysUserId,
      sysUserName: this.form.name.trim(),
      sysUserPass: this.form.code.trim(),
    });
    this.loading = false;
    // 成功
    if (result.payload) {
      this.$message.success("更新成功");
      this.ok();
    }
    // 失败和异常
  }
}
</script>

<style lang="scss"></style>
